<template>
	<div class="install">
		<Layout>
			<Layout class="main">
				<div class="content">
					<div class="container">
						<Loading></Loading>
					</div>
					<p class="content-des">请稍等，正在安装加载中....</p>
					<p class="content-des">
						已完成：<span class="percentage">{{ percentageInt }}%</span>
					</p>
				</div>
			</Layout>
		</Layout>
		<install-complete v-model="isShow" :version="newVersion"></install-complete>
	</div>
</template>
<script>
import InstallComplete from './install-complete.vue'
import Loading from '@/components/loading/loading.vue'
export default {
	components: { InstallComplete, Loading },
	data() {
		return {
			isShow: false,
			percentage: 0,
			newVersion: ''
		}
	},
	computed: {
		percentageInt() {
			// 根据percentage计算整数
			return Math.floor(this.percentage)
		}
	},
	methods: {
		setCount(count) {
			console.log(count)
			this.percentage = count
			if (count === 100) {
				this.isShow = true
			}
		}
	},
	mounted() {
		window.setCount = this.setCount
		console.log(this.$route.query.version)
		if (this.$route.query.version) {
			this.newVersion = this.$route.query.version
		}
	}
}
</script>
<style lang="less" scoped>
.install {
	.main {
		padding: 2rem 1.9rem 2.1rem 1.9rem;
		background-color: var(--bg-color);
		display: flex;
		justify-self: center;
		align-items: center;
		justify-content: center;
		height: 100vh;
		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
		.content-des {
			font-family: PingFangSC-Semibold;
			font-size: 1.13rem;
			color: var(--setting-text-color);
			letter-spacing: 0;
			font-weight: 500;
			margin-top: 1.8rem;
			.percentage {
				color: var(--setting-text-title-color);
				font-size: 2.5rem;
				font-weight: 600;
			}
		}
	}
}
</style>
